/**
 * 基础菜单 商品管理
 */
<template>
  <div id="app">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>试题添加页面</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="block">
    <el-carousel height="150px">
      <el-carousel-item v-for="item in str" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

  </div>
  <div style="margin: 10px 0px;">
<el-button type="success"  @click="open">上传试题标签<i class="el-icon-upload el-icon--right"></i></el-button>
<el-button type="warning"  @click="openliebiao">试题标签详情<i class="el-icon-s-data el-icon--right"></i></el-button>
</div>

<!-- 上传试题标签弹窗 -->
    <el-dialog title="添加标签" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="addtag" :rules="rules" ref="editForm">
        <el-form-item label="标签名称" prop="deptName">
          <el-input size="small" v-model="addtag.tagName" auto-complete="off" placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="addTag()">保存</el-button>
      </div>
    </el-dialog> 

<!-- 标签列表显示 -->
 <!--列表-->
   <el-dialog title="标签详情" :visible.sync="tagliebiao" width="30%" @click="closeDialog">
    <el-table size="small" :data="tag" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="tagName" label="标签名称" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
           <el-tooltip  effect="dark" content="删除" placement="bottom">
            <el-button
            size="mini"
            type="danger"
           @click="deleteTag(scope.$index, scope.row)"
            icon="el-icon-delete"
          ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
     </el-dialog> 





<!-- 试题添加 -->
   <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

     <!-- 单选试题添加页面 -->
    <el-tab-pane label="单选试题添加" name="first">

        <div style="margin: 20px 200px;">
          <span>选择类型</span><br>
             <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
  <!-- 题库 -->
  <el-select v-model="bankid" clearable placeholder="请选择题库" @change="xuanbank()" >
    <el-option
      v-for="item in bank"
      :key="item.id"
      :label="item.bname"
      :value="item.id">
    </el-option>
  </el-select>
              <div style="margin: 10px 0px;">
           <el-button type="primary" icon="el-icon-edit" circle></el-button><span>设置题目</span></div>
            <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.title"
          maxlength="50"
          show-word-limit
        >
        </el-input>
          </div>  
           <div style="margin: 20px 200px;">
             <div style="margin: 10px 0px;">
         <span>设置选项</span>
           </div>
             <el-radio-group v-model="radio">
         <el-radio label=0><el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[0].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input></el-radio><br>

         <el-radio label=1><el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[1].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input></el-radio><br>

         <el-radio label=2>
           <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[2].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input></el-radio><br>

         <el-radio label=3><el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[3].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input></el-radio><br>
       </el-radio-group>
        <div style="margin: 10px 0px;">
       <span>答案解析</span>
        </div>
                <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="Question.analysis"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <el-button type="success" plain style="margin: 20px 0px;"  @click="addSingle">确认添加</el-button>
          </div>  
          
      </el-tab-pane>


    <el-tab-pane label="多选试题添加" name="second">
      <div style="margin: 20px 200px;">
  <span>选择类型</span><br>
             <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
  <!-- 题库 -->
  <el-select v-model="bankid" clearable placeholder="请选择题库" @change="xuanbank()" >
    <el-option
      v-for="item in bank"
      :key="item.id"
      :label="item.bname"
      :value="item.id">
    </el-option>
  </el-select>
 <div style="margin: 10px 0px;">
           <el-button type="primary" icon="el-icon-edit" circle></el-button><span>设置题目</span></div>
            <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.title"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </div>
      <div style="margin: 20px 200px;">
        <div style="margin: 10px 0px;">
        <span>设置选项</span></div>
         <el-checkbox-group v-model="checkList">
      <el-checkbox label=0>
         <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[0].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input> 
      </el-checkbox><br>
      <el-checkbox label=1>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[1].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input>
      </el-checkbox><br>
      <el-checkbox label=2>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[2].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input>
      </el-checkbox><br>
       <el-checkbox label=3>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.optionList[3].content"
          maxlength="20"
          show-word-limit
          style="margin: 10px 0px;"
        >
        </el-input>
      </el-checkbox><br>
     
  </el-checkbox-group>
<div style="margin: 10px 0px;">
   <span>答案解析</span></div>
                <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="Question.analysis"
            maxlength="30"
            show-word-limit
          >
          </el-input>
  <el-button type="success" plain style="margin: 20px 0px;"  @click="addMuch">确认添加</el-button>
          </div> 
      </el-tab-pane>


    <el-tab-pane label="判断试题添加" name="third">
      <div style="margin: 20px 200px;">
         <span>选择类型</span><br>
             <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
  <!-- 题库 -->
  <el-select v-model="bankid" clearable placeholder="请选择题库" @change="xuanbank()" >
    <el-option
      v-for="item in bank"
      :key="item.id"
      :label="item.bname"
      :value="item.id">
    </el-option>
  </el-select>
   <div style="margin: 10px 0px;">
           <el-button type="primary" icon="el-icon-edit" circle></el-button><span>设置题目</span></div>
            <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.title"
          maxlength="50"
          show-word-limit
        >
        </el-input>
         <div style="margin: 10px 0px;">
   <span>题目答案</span></div>
            <el-radio-group v-model="Question.answer">
         <el-radio label="true" style="margin: 20px 0px;"><span >true</span></el-radio><br>

         <el-radio label="false" style="margin: 20px 0px;"><span>false</span></el-radio><br>

       </el-radio-group><br>
       <div style="margin: 10px 0px;">
   <span>答案解析</span></div>
                <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="Question.analysis"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <el-button type="success" plain style="margin: 20px 0px;"  @click="addJudeQue">确认添加</el-button>
          </div> 
      </el-tab-pane>


       <el-tab-pane label="填空试题添加" name="four">
      <div style="margin: 20px 200px;">
         <span>选择类型</span><br>
             <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
  <!-- 题库 -->
  <el-select v-model="bankid" clearable placeholder="请选择题库" @change="xuanbank()" >
    <el-option
      v-for="item in bank"
      :key="item.id"
      :label="item.bname"
      :value="item.id">
    </el-option>
  </el-select>
   <div style="margin: 10px 0px;">
           <el-button type="primary" icon="el-icon-edit" circle></el-button><span>设置题目</span></div>
            <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.title"
          maxlength="50"
          show-word-limit
        >
        </el-input>
       <div style="margin: 10px 0px;">
   <span>题目答案</span></div>
          <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.answer"
          maxlength="20"
          show-word-limit
        >
        </el-input><br>
      <div style="margin: 10px 0px;">
   <span>答案解析</span></div>
                <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="Question.analysis"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <el-button type="success" plain style="margin: 20px 0px;"  @click="addPackQue">确认添加</el-button>
          </div> 
      </el-tab-pane>
  


 <el-tab-pane label="问答试题添加" name="five">
      <div style="margin: 20px 200px;">
         <span>选择类型</span><br>
             <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
  <!-- 题库 -->
  <el-select v-model="bankid" clearable placeholder="请选择题库" @change="xuanbank()" >
    <el-option
      v-for="item in bank"
      :key="item.id"
      :label="item.bname"
      :value="item.id">
    </el-option>
  </el-select>
   <div style="margin: 10px 0px;">
           <el-button type="primary" icon="el-icon-edit" circle></el-button><span>设置题目</span></div>
            <el-input
          type="text"
          placeholder="请输入内容"
          v-model="Question.title"
          maxlength="50"
          show-word-limit
        >
        </el-input>
            <div style="margin: 10px 0px;">
   <span>题目答案</span></div>
                <el-input
            type="textarea"
            placeholder="请输入答案内容关键字"
            v-model="Question.answer"
            maxlength="50"
            show-word-limit
          >
          </el-input><br>
       <div style="margin: 10px 0px;">
   <span>答案解析</span></div>
                <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="Question.analysis"
            maxlength="30"
            show-word-limit
          >
          </el-input>
          <el-button type="success" plain style="margin: 20px 0px;"  @click="addAnswerQue">确认添加</el-button>
          </div> 
      </el-tab-pane>
  

  
  </el-tabs>
   
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import axios from 'axios';


export default {
  //model
  data() {
    return {
      str:["注意：选择题选项不可重复，否则试题添加会发生错误的，可在试题列表将其删除","设置答案为选项前方的选项框","题目标签和存放题目的题库需要选择哦","题目不是人与人合作的桥梁"],
  activeName: 'second',
  radio:null,
      listData: [], //用户数据
      // 分页参数
       tag:[],//题型
       valueid:'', 
       bank:[],
       bankid:'',
       checkList:[],
       user:[],
       addtag:{
         tagName:'',
         creator:null
       },
       editFormVisible:false,
       tagliebiao:false,
    Question:{
      title:'',
      tagId:'',
      bankId:'',
      type:'',
      analysis:'',
      creator:1,
      answer:'',
      optionList:[
        {   
          queId:'',
          content:''
          },
          {   
          queId:'',
          content:''
          },
          {   
          queId:'',
          content:''
          },
          {   
          queId:'',
          content:''
          }
      ],
      answerList:[
        {context:''},
        {context:''},
        {context:''},
        {context:''}
      ]
    },
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getTag();
    this.getallBank();
 this.user = JSON.parse(localStorage.getItem('userdata'));
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
     handleClick() {
         this.Question.analysis='';
           this.Question.title='';
           this.Question.answer='';
            for(let i=0;i<4;i++){
             this.Question.optionList[i].content='';
           }
           this.valueid='';
           this.bankid='';
           this.radio=null;
            this.checkList=[];
      },
        getTag(){
          this.$axios
          .get("/api/tag/findTag")
          .then((res) => {
            console.log(res);
            this.tag = res.data;
          })
          .catch((err) => {});
    },
    
      getallBank(){
          this.$axios
          .get("/api/bank/findAllBank")
          .then((res) => {
            console.log(res);
            this.bank = res.data;
          })
          .catch((err) => {
            
          });
    },

    addAnswerQue(){
      this.Question.creator=this.user.id
      if(this.Question.tagId==''||this.Question.bankId==''||this.Question.title==''||this.Question.analysis==''||this.Question.answer==''){
         this.$message.error('请检查是否填写完整');
        return;
     }else{
       this.$axios.post("/api/question/addAnswerQue",this.Question).then((res) => {
             this.$message({
                    type: "success",
                    message: "试题添加成功！",
                  });
        this.handleClick();
          })
          .catch((err) => {
            this.$message.error('试题添加失败，请检查是否填写完整');
          });
     }
    },

addPackQue(){
  this.Question.creator=this.user.id
 if(this.Question.tagId==''||this.Question.bankId==''||this.Question.title==''||this.Question.analysis==''||this.Question.answer==''){
       this.$message.error('请检查是否填写完整');
        return;
     }else{
       this.$axios.post("/api/question/addPackQue",this.Question).then((res) => {
              this.$message({
                    type: "success",
                    message: "试题添加成功！",
                  });
         this.handleClick();
          })
          .catch((err) => {
            this.$message.error('试题添加失败，请检查是否填写完整');
          });
     }
},

  addJudeQue(){
    this.Question.creator=this.user.id
    if(this.Question.tagId==''||this.Question.bankId==''||this.Question.title==''||this.Question.analysis==''){
        this.$message.error('请检查是否填写完整');
        return;
     }else{
       this.$axios.post("/api/question/addBoolQue",this.Question).then((res) => {
              this.$message({
                    type: "success",
                    message: "试题添加成功！",
                  });
        this.handleClick();
          })
          .catch((err) => {
            this.$message.error('试题添加失败，请检查是否填写完整');
          });
     }
  },

    addMuch(){
     this.Question.creator=this.user.id
          if(this.Question.tagId==''||this.Question.bankId==''||this.Question.title==''||this.Question.analysis==''){
        this.$message.error('请检查是否填写完整');
        return;
     }
     for(let i=0;i<this.Question.optionList.length;i++){
          if(this.Question.optionList[i].content==''){
             this.$message.error('请检查是否填写完整');
          return;
          }
        }
           for(let i=0;i<this.checkList.length;i++){
          this.Question.answerList[i].context=this.Question.optionList[this.checkList[i]].content;
        }
       this.$axios.post("/api/question/addMuchQue",this.Question).then((res) => {
             this.$message({
                    type: "success",
                    message: "试题添加成功！",
                  });
           this.Question.analysis='';
           this.handleClick();
          })
          .catch((err) => {
            this.$message.error('试题添加发生错误，请检查是否填写完整或选项是否重复');
          });
     

    },

  addSingle(){
    this.Question.creator=this.user.id
     if(this.Question.tagId==''||this.Question.bankId==''||this.Question.title==''||this.Question.analysis==''){
         this.$message.error('请检查是否填写完整');
        return;
     }
     for(let i=0;i<this.Question.optionList.length;i++){
          if(this.Question.optionList[i].content==''){
             this.$message.error('请检查是否填写完整');
          return;
          }
        }
          this.Question.answerList[0].context=this.Question.optionList[this.radio].content
       this.$axios.post("/api/question/addSigleQue",this.Question).then((res) => {
            this.$message({
                    type: "success",
                    message: "试题添加成功！",
                  });
             this.handleClick();
          })
          .catch((err) => {
             this.$message.error('试题添加发生错误，请检查是否填写完整或选项是否重复');
          });
     
  },

  open(){
      this.editFormVisible=true;
  },
  openliebiao(){
    this.tagliebiao=true;
  },
  addTag(){
    this.addtag.creator=this.user.id
       this.$axios.get("/api/tag/addTag",{
            params: {
              tagName:this.addtag.tagName,
              creator: this.addtag.creator
            }
            }).then((res) => {
              if(res.data=="success"){
              this.$message({
                    type: "success",
                    message: "试题标签添加成功！",
                  });
                  this.getTag();
                  this.addtag.tagName=''
                  this.editFormVisible=false; 
                   }else{
               this.$message.error('添加失败，名称可能重复');
               this.getTag();
                  this.addtag.tagName=''
                  this.editFormVisible=false; 
            } 
          })
          .catch((err) => {
            this.$message.error('添加失败，请检查是否填写完整');
          });
     
  },
    xuantag(){
        this.Question.tagId=this.valueid;
    },
    xuanbank(){
       this.Question.bankId=this.bankid;
    },
     deleteTag(index, row) {
      this.$confirm('确定要删除吗?删除以后会多了一些无标签的流浪题哦', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          
          this.$axios
          .get("/api/tag/delTag", {
            params: {
              id:row.id
            },
          })
          .then((res) => {
            this.$message({
                    type: "success",
                    message: "标签删除成功！",
                  });
             this.getTag();
          })
          .catch((err) => {});
         
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
   
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>
